<!DOCTYPE html>
<html>
<head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css'/>
    <style>
        .list {
            display: inline-block;
            padding: 5px 10px;
            border-radius: 2px;
            width: auto;
            background-color: #BBBBBB;
            -webkit-transition: all 1s 0s ease;
            -moz-transition: all 1s 0s ease;
            transition: all 1s 0s ease;
        }

        .list:hover {
            background-color: #919191;
        }

        .list .label {
            color: rgb(69, 69, 69);
        }

        .list .delete {
            cursor: pointer;
            color: #EA3A3A;
        }

        .list .delete:hover {
            color: #FD2222;
        }

        .list .delete:active {
            color: red;
        }

        .list + .list {
            margin-left: 10px;
        }
        .add-list {
            margin-top: 10px;
        }
        .add-list input,
        .add-list button {
            padding: 2px 5px;
        }
        /* 粒子系统 */
        .dot-container {
            position: relative;
            width: 400px;
            height: 400px;
            background-color: #bbb;
        }
        .dot {
            position: absolute;
            width: 5px;
            height: 5px;
            background-color: rgb(242, 55, 105);
            border-radius: 50%;
        }
    </style>
</head>
<body>
<h1>Ractive test</h1>
<!-- json数据渲染表格 -->
<h1>静态json数据渲染表格</h1>
<table border="1">
    <tbody id="container_table1">
    <script type="text/ractive" id="template_table1">
    <tr>
      {{#each table1Thead:i}}
      <th>{{table1Thead[i]}}</th>
      {{/each}}
    </tr>
    {{#each table1Person:i}}
    <tr>
      {{#each table1Person[i]:num}}
      <td>{{table1Person[i][num]}}</td>
      {{/each}}
    </tr>
    {{/each}}

    </script>
    </tbody>
</table>

<hr/>
<!-- 改变背景颜色 -->
<h1>按钮控制外观和数据</h1>

<div id="container_selectBgColor">
    <script type="text/ractive" id="template_selectBgColor">
      <output for="selectColorBtn">backgournd color now is : {{bgColor}}</output><input type="color" value="{{bgColor}}" id="selectColorBtn" on-change="changeBgColor"/>

    </script>
</div>

<hr/>
<!--  增加删除事件 -->
<h1>增加删除事件</h1>
<div class="container_todo" id="container_todo">
    <script type="text/ractive" id="template_todo">
        {{#each todoLabel:i}}
        <div class="list">
            <span class="label">{{name}}</span>
            {{#if showDel}}
                <span class="delete" on-click="delLabel">&nbsp;X</span>
            {{/if}}
        </div>
        {{/each}}
        <div class="add-list">
            <input type="text" value="{{newList}}" placeholder="输入你的标签"/>
            <button type="button" on-click="addNewList">addNewList</button>
        </div>
    </script>
</div>

<hr/>
<!-- 粒子系统 -->
<h1>粒子系统</h1>
<div class="dot-container" id="container_dot">
<script type="text/ractive" id="template_dot">
    <button type="button" on-click="{{eventChange[0]}}">{{textChange[0]}}</button>
    {{#each dotArray}}
    <div class="dot" style="left:{{left}}px;top:{{top}}px;" data-age="{{age}}"></div>
    {{/each}}
</script>
</div>
<script src='/javascripts/libray/ractive.min.js'></script>
<script src="/javascripts/index.js">
</script>
</body>
</html>

